<template>
    <a-table :columns="columns" :data-source="data" @change="onChange" >
        <template #name="{ text: name }">
          <span>
            <a-tag
                    v-for="item in name"
                    :key="item"
                    :color="item === 'loser' ? 'volcano' : item.length > 5 ? 'geekblue' : 'green'"
            >
              {{ item.label }}
            </a-tag>
          </span>
        </template>
    </a-table>
</template>
<script>
    import { defineComponent } from 'vue';
    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            slots: {
                customRender: 'name',
            },
            filters: [
                {
                    text: 'Joe',
                    value: '1',
                },
                {
                    text: 'Jim',
                    value: '2',
                },
                {
                    text: 'Submenu',
                    value: 'Submenu',
                    children: [
                        {
                            text: 'Green',
                            value: 'Green',
                        },
                        {
                            text: 'Black',
                            value: 'Black',
                        },
                    ],
                },
            ],
            onFilter: (value, record) => {
               console.log( record.name)
                let filtersArr = [];
                let filters = record.name.filter(item=>{

                    if(item.value==value) filtersArr.push(item.value)

                    return filtersArr
                });
               console.log(filtersArr)
               console.log(filtersArr.indexOf(value)=== 0)

                // console.log(record.name)
                //
                // record.name.forEach(function(item) {
                //     if (item.value == value) {
                //         return index === 0;  //返回false
                //     }
                // })

                return filtersArr.indexOf(value) === 0
            },

        },
        {
            title: 'Age',
            dataIndex: 'age',
            defaultSortOrder: 'descend',
        },
        {
            title: 'Address',
            dataIndex: 'address',


        },
    ];
    const data = [
        {
            key: '1',
            name: [ { label: '读', value: '1' }],
            age: 32,
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '2',
            name: [ { label: '超', value: '0' },],
            age: 42,
            address: 'London No. 1 Lake Park',
        },
        {
            key: '3',
            name: [{ label: '超', value: '0' },],
            age: 32,
            address: 'Sidney No. 1 Lake Park',
        },
        {
            key: '4',
            name: [ { label: '超', value: '0' },],
            age: 32,
            address: 'London No. 2 Lake Park',
        },
    ];
    export default defineComponent({
        setup() {
            const onChange = (pagination, filters, sorter) => {
                console.log('params', pagination, filters, sorter);
            };

            return {
                data,
                columns,
                onChange,
            };
        },
    });
</script>
